<template>
  <el-row type="flex" justify="space-between" class="wh container">
    <el-row class="left">
      <AirHeader :info="info" :options="options" :airList="cacheAirList" @loadFilterData="filterData"/>
      <el-row class="tab">
        <el-row class="tab-header">
          <el-col :span="6">航空信息</el-col>
          <el-col :span="6">起飞时间</el-col>
          <el-col :span="6">到达时间</el-col>
          <el-col :span="6">价格</el-col>
        </el-row>
        <AirItem :airData="item" v-for="item in dataList" :key="item.id"/>
        <el-row v-if="dataList && dataList.length == 0" class="no-content">暂无数据</el-row>
      </el-row>
      <el-pagination
      align="center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-row>
    <el-row class="right">
      <el-row class="info">
        <el-row class="info-top">
          <el-col :span="8" class="col">
              <i class="iconfont iconweibiaoti-_huabanfuben"></i>
              <span>航协认证</span>
            </el-col>
          <el-col :span="8" class="col">
              <i class="iconfont iconbaozheng"></i>
              <span>出行保证</span>
          </el-col>
          <el-col :span="8" class="col">
              <i class="iconfont icondianhua"></i>
              <span>7x24</span>
          </el-col>
        </el-row>
        <el-row class="info-bottom">
          <h5>免费客服电话：4006345678转2</h5>
        </el-row>
      </el-row>
      <!-- 这一段布局需要格外注意？？ -->
      <el-row class="history">
        <h4>历史查询</h4>
        <el-row class="history-box">
            <el-row class="history-item" type="flex" justify="space-between"
            v-for="(item,index) in $store.state.history.historyList"
            :key="index"
            >
               <div class="trip">
                 <span>{{item.departCity}} - {{item.destCity}}</span>
                 <b>{{item.departDate}}</b>
               </div>
               <div class="option">
                 <nuxt-link :to="`/ticket/journey?departCity=${item.departCity}&departCode=${item.departCode}&destCity=${item.destCity}&destCode=${item.destCode}&departDate=${item.departDate}`" class="link">
                    <span>选择</span>
                 </nuxt-link>
               </div>
            </el-row>
        </el-row>
      </el-row>
    </el-row>
  </el-row>
</template>

<script>
import AirItem from '@/components/ticket/AirItem'
import AirHeader from '@/components/ticket/AirHeader'
export default {
  data(){
    return{
      airList:[],
      cacheAirList:[],
      info:{},
      options:{},
      total:0,
      pageIndex:1,
      pageNum:10
    }
  },
   components:{
      AirItem,
      AirHeader
   },
   computed:{
      //这里重新算出应该展示的数据  
      dataList(){
         if(!this.airList)return [];

         let beginIndex = (this.pageIndex -1) * this.pageNum;
         let endIndex = beginIndex + this.pageNum;

         return this.airList.slice(beginIndex,endIndex);
      }
   },
   watch:{
    //  判断路径是否有变化，可以通过判断当前路由的变化
     $route(){
       this.loadAirList();
     }
   },
   methods:{
     loadAirList(){
         this.$axios({
           url:'/airs',
           params:this.$route.query
         }).then(res => {
           this.airList = res.data.flights;
           this.cacheAirList = res.data.flights;
           this.info = res.data.info;
           this.options = res.data.options;
           this.total = res.data.total;
         })
     },
      handleSizeChange(val) {
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
      },
      filterData(data){
         this.airList = data;
         this.total = this.airList.length;
      }
   },
   mounted(){
      this.loadAirList();   
   }
}
</script>

<style lang="less" scoped>
.wh{
   width:1000px;
   margin:20px auto 0 auto;
}
// 为什么我在父组件加的样式能影响子组件？？
// 解决：子组件的根标签还是会受影响
// .container{
//   margin-top: 20px;
// }
.left{
  width: 745px;
}
.tab{
  margin-top: 20px;
  .tab-header{
    box-sizing: border-box;
    height: 38px;
    line-height: 38px;
    text-align:center;
    border:1px solid #DDDDDD;
    background-color: #F6F6F6;
    color: #666666;
    font-size: 12px;
  }
}

.right{
  width: 240px;
  .info{
    width:100%;
    margin-bottom: 10px;
    border:1px solid #DDDDDD;
    .info-top{
      padding:14px 0;
      .col{
        display: flex;
        flex-direction: column;
        align-items: center;
        .iconfont{
          font-size: 38px;
          color: rgb(64, 158, 255);
        }
        &:nth-child(2n){
            i{
              color: #008000;
            }
        }
        span{
          font-size: 12px;
          color: #000;
        }
      }
    }
    .info-bottom{
      h5{
        font-size: 14px;
        color: #000;
        font-weight: 400;
        text-indent: 10px;
        line-height: 32px;
        background-color: #F6F6F6;
      }
    }
  }
  .history{
    width:100%;
    border:1px solid #DDDDDD;
    h4{
      height: 40px;
      margin:0 12px;
      line-height: 40px;
      font-size: 16px;
      color: #000;
      font-weight: 400;
      border-bottom:1px solid #DDDDDD;
    }
    .history-box{
      padding: 0 12px;
      .history-item{
        height: 60px;
        display: flex;
        justify-content: space-between;
        .trip{
          display: flex;
          flex-direction: column;
          justify-content: center;
          span{
             font-size: 14px;
             color: #000;
          }
          b{
             margin-top: 6px;
             font-size: 12px;
             color: #666666;
             font-weight: 400;
          }
        }
        .option{
          display: flex;
          justify-content: center;
          align-items: center;
          span{
            padding:2px 10px;
            font-size: 12px;
            color: #fff;
            border-radius: 5px;
            background-color: #FFA000;
          }
        }
      }
    }
  }
}
.el-pagination{
  margin-bottom: 10px;
}
.link{
  text-decoration: none;
}
.no-content{
  height: 84px;
  margin-bottom: 15px;
  line-height: 84px;
  text-align: center;
  color: #999999;
  font-size: 14px;
  border: 1px solid #DDDDDD;
  border-top:0;
}
</style>